<template>
  <vue-loadmore :on-refresh="onRefresh" :on-loadmore="onLoad" :finished="finished">
    <div v-for="(item, i) of list" :key="i">
      {{ item }}
    </div>
  </vue-loadmore>
</template>
<script>
import Vue from 'vue'
import VueLoadmore from 'vuejs-loadmore'

Vue.use(VueLoadmore)
export default {
  name: 'MyPage',
  data() {
    return {
      list: [],
      page: 1,
      pageSize: 10,
      finished: false,
    }
  },
  mounted() {
    this.fetch()
  },
  methods: {
    onRefresh(done) {
      this.list = []
      this.page = 1
      this.finished = false
      this.fetch()

      done()
    },

    onLoad(done) {
      if (this.page <= 10) {
        this.fetch()
      } else {
        // all data loaded
        this.finished = true
      }
      done()
    },

    fetch() {
      for (let i = 0; i < 20; i++) {
        this.list.push(this.list.length + 1)
      }
      this.page++
    },
  },
}
</script>
<style lang="less" scoped></style>
